<template>
  <div class="prolist-main-box">
    <div class="empty-box" v-if="showEmpty">暂无数据！</div>
    <div v-else>
      <div
        class="list-item"
        v-for="(item, index) in tableData"
        :key="index"
        @click="clickProject(item)"
      >
        <div class="item-left">
          <div class="head-box">
            <div class="identifier-box"></div>
            <div>{{ item.proshortname }}</div>
          </div>
          <div class="item-info-box">
            <div class="left-box">
              <div>项目编号：</div>
              <div>项目全称：</div>
              <div>项目阶段：</div>
              <div>项目地点：</div>
            </div>
            <div class="right-box">
              <div>{{ item.procode }}</div>
              <div>{{ item.proname }}</div>
              <div>{{ item.stageName }}</div>
              <div>{{ item.procity }}</div>
            </div>
          </div>
        </div>
        <div class="item-right">
          <div class="btn-box">
            <el-button type="success" style="display: none"></el-button>
            <el-button type="success" @click="handCost(item)">费用</el-button>
            <el-button type="success" @click="handAnnex(item)">附件</el-button>
            <el-button type="success" @click="handMilestone(item)"
              >里程碑</el-button
            >
            <el-button type="success" @click="handUpdate(item)">编辑</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: null,
    },
    openInfoDrawer: {
      type: Function,
      default: null,
    },
    openCost: {
      type: Function,
      default: null,
    },
    openUpdate: {
      type: Function,
      default: null,
    },
    openAnnex: {
      type: Function,
      default: null,
    },
    openMilestoner: {
      type: Function,
      default: null,
    },
    openAnnexAndMilestoner: {
      type: Function,
      default: null,
    },
    openCollection: {
      type: Function,
      default: null,
    },
  },
  watch: {
    tableData(nv, ov) {
      if (!nv.length) {
        this.showEmpty = true;
      } else {
        this.showEmpty = false;
      }
    },
  },
  data() {
    return {
      openInfo: true,
      showEmpty: true,
    };
  },
  methods: {
    clickProject(row, column, event) {
      if (!this.openInfo) return;
      this.openInfoDrawer(row);
    },

    // 费用按钮
    handCost(row) {
      this.openInfo = false;
      this.openCost(row);
      this.setOpenInfo();
    },

    // 编辑按钮
    handUpdate(row) {
      this.openInfo = false;
      this.openUpdate(row);
      this.setOpenInfo();
    },

    // 回款信息按钮
    handCollection(row) {
      this.openInfo = false;
      this.openCollection(row);
      this.setOpenInfo();
    },

    // 附件与里程碑按钮
    handAnnexAndMilestone(row) {
      this.openInfo = false;
      this.openAnnexAndMilestoner(row);
      this.setOpenInfo();
    },
    // 附件按钮
    handAnnex(row) {
      this.openInfo = false;
      this.openAnnex(row);
      this.setOpenInfo();
    },

    // 里程碑按钮
    handMilestone(row) {
      this.openInfo = false;
      this.openMilestoner(row);
      this.setOpenInfo();
    },

    setOpenInfo() {
      setTimeout(() => {
        this.openInfo = true;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.prolist-main-box {
  .empty-box {
    width: 100%;
    height: 460px;
    text-align: center;
    line-height: 460px;
  }
  .list-item {
    border: 1px solid #c4c0c0;
    border-radius: 15px;
    width: 96%;
    margin-left: 2%;
    margin-bottom: 10px;
    background: none;
    display: flex;
    /* background: linear-gradient(#9ccaeb, #cfd5e7); */
    /* background: linear-gradient(50deg, #fff, #cfd5e7, #46a9f0); */

    .item-left {
      width: 70%;

      .head-box {
        border-bottom: 1px solid #dddcdc;
        height: 30px;
        line-height: 30px;
        text-align: start;
        font-size: 13px;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 20px;
        display: flex;
        align-items: center;

        .identifier-box {
          height: 10px;
          width: 5px;
          margin-right: 6px;
          background: #11a70c;
        }
      }
      .item-info-box {
        display: flex;
        margin-left: 12 px;

        .left-box,
        .right-box {
          /* border: 1px solid red; */
          font-size: 14px;
          > div {
            height: 26px;
            line-height: 26px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }

        .left-box {
          width: 30%;
          text-align: end;
        }
        .right-box {
          width: 68%;
          text-align: start;
        }
      }
    }
    .item-right {
      width: 29%;
    }

    .item-title {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;

      > div {
        /* border: 1px solid blue; */
        height: 30px;
      }
    }

    .pro-name {
      /* border: 1px solid red; */
      height: 45px;
      line-height: 25px;
      padding: 10px;
      text-align: center;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .pro-info {
      /* border: 1px solid red; */
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;

      > div {
        /* border: 1px solid blue; */
        width: 50%;
        font-size: 14px;
        overflow: hidden;
      }
    }

    .btn-box {
      border-left: 1px solid rgb(182, 175, 175);
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 5px 15px;
      height: 80%;
      margin-top: 10px;

      .el-button {
        height: 30px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>